<template>
  <div>
    <div class="edu-page-title" style="margin: 10px auto 10px 0;">异动申请明细</div>
    <el-card shadow="never" body-style="padding: 24px;" class="bg-white">
      <el-form
        ref="applyForm"
        :model="applyForm"
        label-width="120px"
        class="bg-white pd-12px"
        :rules="rules"
      >
        <el-row :gutter="20" style="height: 50px;">
          <el-col :span="6">
            <el-form-item label="异动学期：" :label-width="formLabelWidth" prop="grade">
              <el-select v-model="applyForm.grade">
                <el-option
                  v-for="item in options.grade"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="异动大类："
              :label-width="formLabelWidth"
              @change="getAbnormalTypes"
              prop="classId"
            >
              <el-select v-model="applyForm.classId">
                <el-option
                  v-for="item in options.abnormalList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="异动类型："
              :label-width="formLabelWidth"
              @change="getAbnormalReasons"
              prop="typeId"
            >
              <el-select v-model="applyForm.typeId">
                <el-option
                  v-for="item in options.abnormalType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="原因：" :label-width="formLabelWidth" prop="reason">
              <el-select v-model="applyForm.reason">
                <el-option
                  v-for="item in options.reasons"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="height: 50px;">
          <el-col :span="12">
            <el-form-item label="申请说明：" :label-width="formLabelWidth">
              <el-input v-model="applyForm.comments" placeholder="请输入" type="textarea"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="empty-box"></div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="height: 50px;">
          <el-col :span="24">
            <el-form-item label="证明材料：" :label-width="formLabelWidth">
              <el-upload
                action="/api/commonservice/obsfile/uploadfile"
                ref="upload"
                :data="uploadConfig.data"
                :file-list="uploadConfig.fileList"
                :on-success="handlerUploadSuccess"
                :on-error="handlerUploadError"
                :auto-upload="true"
              >
                <el-button size="small" type="primary" style="margin-right: 10px">上传</el-button>
                <i class="el-icon-info"></i>
                <span>您可以上传图片证明文件，大小不要超过3MB</span>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" style="height: 50px;">
        <el-col :span="24">
          <div class="float-right">
            <el-button @click="reset">{{ $t('message.reset') }}</el-button>
            <el-button type="primary" @click="doApplyAbnormal">提交</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import * as API from 'common/src/api/abnormal'
export default {
  data() {
    const getGrade = (function() {
      const now = new Date().getFullYear()
      const years = []
      for (let i = 0; i < 6; i++) {
        years.push({
          label: now - i,
          value: now - i,
        })
      }
      return years
    })()
    return {
      uploadConfig: {
        fileList: [],
        data: { bucketname: 'face', folderpath: 'file' },
      },
      applyForm: {
        attachFile: [],
        classId: '',
        typeId: '',
        comments: '',
        studentId: this.$route.params.studentId,
        createTime: Date.parse(new Date()),
        createType: 0,
      },
      rules: {
        grade: [{ required: true, message: '请选择年级', trigger: 'blur' }],
        classId: [
          { required: true, message: '请选择异动大类', trigger: 'blur' },
        ],
        typeId: [
          { required: true, message: '请选择异动类型', trigger: 'blur' },
        ],
        typeId: [
          { required: true, message: '请选择异动类型', trigger: 'blur' },
        ],
        reason: [
          { required: true, message: '请选择异动原因', trigger: 'blur' },
        ],
      },
      options: {
        grade: getGrade,
        abnormalList: [],
        abnormalType: [],
        reasons: [],
      },
    }
  },
  methods: {
    // 获取异动类型
    getAbnormalTypes() {
      API.getAbnormalTypes({ classId: this.queryForm.classId }).then(
        (response) => {
          if (response.code === 200) {
            _fill('abnormalType', response.data.list)
          } else throw response.code
        }
      )
    },
    // 获取异动原因
    getAbnormalReasons() {
      API.getAbnormalReasons({ typeId: this.typeId }).then((response) => {
        if (response.code === 200) {
          _fill('reasons', response.data.list)
        } else throw response.code
      })
    },
    _fill(type, data) {
      for (const key in data) {
        this.options[type].push({
          value: key,
          label: data[key],
        })
      }
    },
    reset() {
      // 应该拿到attachFile遍历调用一次删除文件的接口再清空文件列表
      this.applyForm = {
        attachFile: [],
        classId: '',
        typeId: '',
        comments: '',
        studentId: this.$route.params.studentId,
        createTime: Date.parse(new Date()),
        createType: 0,
      }
    },
    doApplyAbnormal() {
      this.$refs['applyForm'].validate((valid) => {
        if (valid) {
          API.doApplyAbnormal(this.applyForm).then((response) => {
            if (response.code === 200) {
              this.$router.push({
                name: 'applyAbnormalList',
              })
            }
          })
        }
      })
    },
    handlerUploadSuccess(response, file, fileList) {
      let responseCode = response.code
      if (responseCode === 200) {
        this.$message({
          message: '上传成功！',
          type: 'success',
        })
        this.applyForm.attachFile.push(
          Object.values(response.data)[0].objectkey
        )
      } else {
        this.$message({
          message: '文件列名错误或文件为空！',
          type: 'error',
        })
      }
    },
    handlerUploadError(rresponse, file, fileList) {
      this.$message({
        message: '上传失败！',
        type: 'error',
      })
    },
  },
}
</script>
<style>
</style>
